<template>
  <div class="pie">
    <div ref="mypie"></div>
  </div>
</template>

<script>
// 导入插件
// import { Line } from '@antv/g2plot'
import { Pie } from '@antv/g2plot'
export default {
  props: ['data'],
  mounted () {
    const piePlot = new Pie(this.$refs.mypie, {
      height: 200,
      width: 350,
      // forceFit: true,
      title: {
        visible: true
      },
      description: {
        visible: true
      },
      position: ['10%', '10%'],
      radius: 0.8,
      innerRadius: 0.4,
      data: this.data,
      angleField: 'value',
      colorField: 'type',
      label: {
        visible: false
      },
      // 表格
      legend: {
        width: 500,
        position: 'right',
        offsetX: -30,
        title: {
          visible: true,
          text: '区间                  占比',
          style: {
            borderBotttom: '1px solid #f00'
          }
        },
        text: {
          formatter: (type, value, index) => {
            // console.log(this.data[index].value)
            return type + '-' + this.data[index].value + '% '
          }
        }
      },
      // 中间标题
      statistic: {
        visible: true,
        content: {
          value: '32%',
          name: '平均'
        }
      }
    })

    piePlot.render()
  }
}
</script>

<style lang="less" scoped></style>
